@import "styles/hide-native-scrollbars";
@import "styles/visibility";
@import "styles/appearance";

:host {
  // CSS variables used to customized the look of the scrollbar component
  --scrollbar-border-radius: 7px;
  --scrollbar-padding: 4px;
  --scrollbar-track-color: transparent;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);
  --scrollbar-size: 5px;
  --scrollbar-hover-size: var(--scrollbar-size);
  --scrollbar-overscroll-behavior: initial;
  --scrollbar-transition-duration: 400ms;
  --scrollbar-transition-delay: 800ms;
  --scrollbar-thumb-transition: height ease-out 150ms, width ease-out 150ms;
  --scrollbar-track-transition: height ease-out 150ms, width ease-out 150ms;

  display: block;
  position: relative;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  // Make sure child container are equal to component height when set (auto-height/auto-width)
  // This also prevent when sometimes the scrollbar appears when it should not
  box-sizing: content-box !important;

  > .ng-scrollbar-wrapper {
    --scrollbar-total-size: calc(var(--scrollbar-size) + var(--scrollbar-padding) * 2);

    // To enable the hover size, we need to calculate and set variable for each scrollbar
    --vertical-scrollbar-size: var(--scrollbar-size);
    --horizontal-scrollbar-size: var(--scrollbar-size);
    --vertical-scrollbar-total-size: calc(var(--vertical-scrollbar-size) + var(--scrollbar-padding) * 2);
    --horizontal-scrollbar-total-size: calc(var(--horizontal-scrollbar-size) + var(--scrollbar-padding) * 2);

    // Change vertical scrollbar size in case its hovered or dragged
    @include scrollbarYHovered {
      --vertical-scrollbar-size: var(--scrollbar-hover-size);
      --vertical-scrollbar-total-size: calc(var(--vertical-scrollbar-size) + var(--scrollbar-padding) * 2);
      cursor: default;
    }

    // Change horizontal scrollbar size in case its hovered or dragged
    @include scrollbarXHovered {
      --horizontal-scrollbar-size: var(--scrollbar-hover-size);
      --horizontal-scrollbar-total-size: calc(var(--horizontal-scrollbar-size) + var(--scrollbar-padding) * 2);
      cursor: default;
    }

    @include enabled {
      @include nativeAppearance;
      @include hideNativeScrollbar;
      @include hoverVisibility;
    }

    @include scrollbarXUsed {
      @include viewport {
        overflow-x: auto;
        overflow-y: hidden;
      }
    }

    @include scrollbarYUsed {
      @include viewport {
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    @include allUsed {
      @include viewport {
        overflow: auto;
      }
    }
  }
}

.ng-scrollbar-wrapper,
.ng-scroll-viewport-wrapper,
.ng-scroll-layer,
::ng-deep .ng-scroll-viewport {
  @extend %layer;
}

.ng-scroll-viewport-wrapper {
  overflow: hidden;
}

.ng-scroll-viewport {
  -webkit-overflow-scrolling: touch;
  contain: strict;
  will-change: scroll-position;
  overscroll-behavior: var(--scrollbar-overscroll-behavior);
}

::ng-deep .ng-scroll-content {
  display: inline-block;
  min-width: 100%;
}

%layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
